<template>
    <el-form v-loading='loading'>
        <div class="user-photo-text">头像</div>
        <el-upload
                class="avatar-uploader"
                action="btpj"
                :http-request="uploadFile"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="用户头像">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="登录名">
            <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="user.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-button type="primary" @click="sureToSubmit" class="login-btn">确认修改</el-button>
    </el-form>
</template>

<script>
    import {getUserInfoApi, updateUserInfo} from "../api/userApi";
    import {uploadFile} from "../api/fileApi";

    export default {
        name: "PersonalInfo",
        data() {
            return {
                loading: false,
                user: {},
                imageUrl: ''
            }
        },
        mounted() {
            this.getUserInfo();
        },
        methods: {
            getUserInfo() {
                this.loading = true;
                getUserInfoApi().then((res) => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.user = res.data;
                        this.imageUrl = res.data.photo
                    }
                });
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            uploadFile(params) {
                uploadFile(params.file).then(res => {
                    console.log(res);
                    if (res.status === 0) {
                        this.imageUrl = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            sureToSubmit() {
                this.loading = true;
                updateUserInfo(this.user.name, this.user?.nickName, this.user?.email,
                    this.user?.phone, this.imageUrl).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            }
        }
    }
</script>

<style scoped lang="stylus">
    .el-form {
        padding 20px

        .user-photo-text {
            text-align left
            margin 10px 0 15px 10px
        }

        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            width 178px
            border-radius: 6px;
            cursor: pointer;

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }

            .avatar {
                width: 178px
                height: 178px
                display: block
            }
        }

        .el-button {
            width 30%
        }
    }
</style>
